<template>
  <view class="ticket-list-page">
    <view class="tabs">
      <v-tabs
        :tabs="tabs"
        @changeType="changeType"
        :showMore="false"
        :selected="activeTab"
      />
    </view>
    <view class="list_wrap" v-if="list && list.length">
      <view
        class="item"
        v-for="item in list"
        :key="item.ticOtherId"
        @click="handleToDetail(item)"
      >
        <view class="item_lf">
          <image :src="img_baseUrl + item.ticketPic" mode="aspectFill"></image>
        </view>
        <view class="item_rt">
          <view class="top">
			  <text>{{ item.name }}</text>
			  <view class="top_b">
				  <img :src="`${img_baseUrl}/statics/std/static/loc_gray.png`" alt="" />
				  <text>{{ item.addressDetails }}</text>
			  </view>
		  </view>
          <!-- <view class="mid" v-if="item.label">
            <text v-for="(i, index) in item.label.split('|')" :key="index">{{ i }}</text>
          </view> -->
         <!-- <view class="mid" v-else>
          </view> -->
          <view class="bot">
            <text>购票</text>
            <view class="bot_rt">
              <img :src="`${img_baseUrl}/statics/std/static/price.png`" alt="" />
              <view class="price">{{ item.ticketPrice || '0.00' }}</view>
              <text>起</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="noData" v-if="list && list.length === 0">
      <image :src="`${img_baseUrl}/statics/std/static/noData.png`"></image>
      <text>暂无数据</text>
    </view>
  </view>
</template>

<script>
import {requestGet} from "@/utils/request.js";
import vTabs from "@/components/tabs.vue";
export default {
  data() {
    return {
      img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
      list: null,
      current: 1,
      total: 0,
      loadAll: false, // 已加载全部
      tabs: [
        {
          label: "0",
          text: "全部",
        },
        {
          label: "1",
          text: "景点",
        },
        {
          label: "2",
          text: "活动",
        },
      ],
      activeTab: "0",
      keyId: 0,
    };
  },
  components: {
    vTabs,
  },
  mounted() {
    this._getList();
  },
  methods: {
    changeType(e) {
      this.activeTab = e.type;
      this.current = 1;
      uni.showLoading({
        title: "加载中",
      });
      this._getList();
    },
    handleToDetail(item) {
      uni.navigateTo({
        url: `/page_index/ticket/detail?id=${item.ticOtherId}`,
      });
    },
    _getList() {
      // otherBaseType 基础类别 1 景区 2 活动
      let params = { pageNum: this.current, pageSize: 10 };
      if(this.activeTab > 0) params = {otherBaseType: this.activeTab, ...params};
      requestGet("/ticket/attribute/applet/list", params)
        .then((res) => {
          if (res.code === 200) {
            this.total = res.total;
            this.list = this.current === 1 ? res.rows : this.list.concat(res.rows);
            this.keyId++;
          } else {
            this.list = [];
          }
          uni.hideLoading();
        })
        .catch((err) => console.log("错误了", err));
    },
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.list?.length < this.total) {
      this.current = this.current + 1;
      this._getList();
    } else {
      this.loadAll = true;
    }
  },
};
</script>

<style lang="scss">
.ticket-list-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;

  .tabs {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 14rpx 32rpx;
  }

  .list_wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx;

    .item {
      width: 100%;
      height: 360rpx;
	  border-radius: 24rpx;
	  overflow: hidden;
	  margin-bottom: 16rpx;
	  position: relative;

      .item_lf {
        width: 100%;
        height: 100%;
        image {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .item_rt {
		  position: absolute;
		  left: 8rpx;
		  bottom: 8rpx;
        width: calc(100% - 16rpx);
        height: 132rpx;
		background-image: url('../../static/new/tic_pri.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
        display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 16rpx 24rpx 24rpx;
        .top {
			width: 378rpx;
			text {
				width: 100%;
				font-size: 32rpx;
				font-weight: 600;
				color: rgba(0,0,0,0.7);
				line-height: 44rpx;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
          
		  .top_b {
			  display: flex;
			  margin-top: 16rpx;
			  image {
			    width: 32rpx;
			    height: 32rpx;
			    display: block;
			  }
			  text {
			  	width: 100%;
			    font-size: 24rpx;
			    font-weight: 400;
			    color: rgba(0, 0, 0, 0.5);
			    line-height: 30rpx;
			     display: -webkit-box;
			     -webkit-line-clamp: 1;
			     -webkit-box-orient: vertical;
			     overflow: hidden;
			     text-overflow: ellipsis;
			  
			  }
		  }
        }
        .mid {
          flex: 1;
          margin-top: 16rpx;
          text {
            box-sizing: border-box;
            padding: 0 8rpx;
            height: 40rpx;
            background: #d6ebff;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #2187ff;
            line-height: 34rpx;
            margin-right: 12rpx;
          }
        }
        .bot {
          height: 40rpx;
          display: flex;
		  flex-direction: column;
          align-items: flex-end;
          justify-content: space-between;
          margin-bottom: 8rpx;
		  color: #3FAA73;
          .bot_lf {
			  flex: 1;
            display: flex;
            align-items: center;
            image {
              width: 32rpx;
              height: 32rpx;
              display: block;
            }
            text {
				width: 200rpx;
              font-size: 24rpx;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.5);
              line-height: 30rpx;
			   white-space: nowrap;
			          overflow: hidden;
			          text-overflow: ellipsis;

            }
          }
          .bot_rt {
            display: flex;
            align-items: flex-end;
			margin-top: 10rpx;
            image {
              width: 32rpx;
              height: 32rpx;
              display: block;
            }

            .price {
              font-size: 40rpx;
              font-family: D-DIN-Bold;
              font-weight: 700;
              color: #ff7614;
              line-height: 40rpx;
              margin-right: 6rpx;
            }

            text {
              font-size: 24rpx;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.6);
              line-height: 34rpx;
            }
          }
        }
      }
    }
  }
}
</style>
